<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>6.vue监测数据改变的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			let data = {
				name: "尚硅谷",
				address: "北京"
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new observer(data)
			console.log(obs)

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs


			function observer(obj) { //汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k) => {
					Object.defineProperty(this, k, {
						get() {
							return obj[k]
						},
						set(val) {
							obj[k] = val
						}
					})
				})
			}
		</script>
	</body>
	<!-- 1.到底有没有下划线_data?
		2.有没有加工data?
		如果说只是把data赋值给_data,那么蓝色框和红色框里面的数据应该一样。
		比如name，给到_data后，name的值不再直接赋值了，通过get_name复制，修改是通过set_name。
		所以，所谓加工都是将data中的每一组key-value，都添加get，set方法。
	 -->

	<!-- 为什么要加工一下？加工一下后就可以做响应式的（数据变了，页面也跟着变。）。
	   比如修改了_data中的name的时候，就会引起set_name调用,set_name里面写了一个调用，
		这个调用就能重新解析模板，模板一改，生产新旧DOM,然后新旧DOM对比，然后更新页面。
		所以这一加工，就能实现对对象里面的属性监视。
	 -->
</html>